/* * @Author: wangsh  * @Date: 2019-05-11 19:45:00  */
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import {
  Menu,
  Layout
} from 'antd';

import './style.scss';

const { Header } = Layout;
const { SubMenu, ItemGroup } = Menu;


class HeaderNav extends Component {
  state = {
    userName: '王思涵'
  }

  handleClickLogout = () => {
    const { history } = this.props;
    history.push('/login');
  }

  render() {
    return (
      <Header style={{ background: '#ceddea' }}>
        <Menu mode="horizontal" style={{ float: 'right', background: '#ceddea', marginTop: '5px' }}>
          <SubMenu title={<span className="avatar"><img src="//apic.douyucdn.cn/upload/avatar/039/88/38/39_avatar_middle.jpg" alt="头像" /></span>}>
            <ItemGroup title={this.state.userName}>
              <Menu.Item key="setting:2">个人信息</Menu.Item>
              <Menu.Item
                key="logout"
                onClick={this.handleClickLogout}
              >
                <span>退出登录</span>
              </Menu.Item>
            </ItemGroup>
          </SubMenu>
        </Menu>
      </Header>
    );
  }
}

export default withRouter(HeaderNav);
